import { ref,onMounted,onUnmounted } from "vue";
 
export const useFullscreen=(target) =>{
  // 定义一个响应式的 ref 对象,用于跟踪当前是否处于全屏模式
  const isFullscreen = ref(false);
const element = target??document.documentElement
  // 进入全屏模式
  const requestFullscreen = () => {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  };
 
  // 退出全屏模式
  const exitFullscreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  };
 
  // 切换全屏模式
  const toggleFullscreen = () => {
    if (isFullscreen.value) {
      exitFullscreen();
      isFullscreen.value = false;
    } else {
      requestFullscreen();
      isFullscreen.value = true;
    }
  };
 
  // 全屏模式变化时的处理函数
  const handleFullscreenChange = () => {
    console.log("这里被触发")
    isFullscreen.value = !!(
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement
    );
  };
 
  // 监听全屏事件
  onMounted(()=>{
    document.addEventListener("fullscreenchange", handleFullscreenChange);
    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
    document.addEventListener("msfullscreenchange", handleFullscreenChange);
  })
  
 onUnmounted(()=>{
    document.removeEventListener("fullscreenchange", handleFullscreenChange);
    document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
    document.removeEventListener("msfullscreenchange", handleFullscreenChange);
 })
  // 返回全屏相关的功能和状态
  return {
    isFullscreen,
    requestFullscreen,
    exitFullscreen,
    toggleFullscreen,
  };
}